<template>
  <div class="question" v-if="info !== ''">
    <van-dropdown-menu>
      <van-dropdown-item ref="drop">
        <template #title>
          <div class="title">
            面试宝典<span class="city">{{ city }}</span>
          </div>
        </template>
        <template #default>
          <div class="select">
            <van-index-bar :index-list="indexList">
              <div
                class="txt"
                v-for="(value, key, index) in info.citys"
                :key="index"
              >
                <van-index-anchor :index="key" />
                <van-cell
                  :title="item"
                  v-for="(item, index2) in value"
                  :key="index2"
                  @click.native="onCfirm(item)"
                />
              </div>
            </van-index-bar>
          </div>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="content">
      <div class="tagList">
        <van-tag
          class="tag"
          :class="{ active: currentIndex === index1 }"
          color="#f7f4f5"
          text-color="#75758b"
          v-for="(item1, index1) in info.cityPositions[city]"
          :key="index1"
          @click.native="currentIndex = index1"
          >{{ item1.name }}</van-tag
        >
      </div>
    </div>
    <div class="bg">
      <div class="line"></div>
      <div class="middle">
        <div class="middle-top">
          <div class="item">
            <div class="icon1 color1"><i class="iconfont">&#xe64f;</i></div>
            <div class="p">常错题库</div>
          </div>
          <div class="item">
            <div class="icon1 color2"><i class="iconfont">&#xe654;</i></div>
            <div class="p">收藏题库</div>
          </div>
        </div>
        <div class="middle-bottom">
          <div class="item">
            <div class="icon1 color3"><i class="iconfont">&#xe648;</i></div>
            <div class="p">企业题库</div>
          </div>
          <div class="item">
            <div class="icon1 color4"><i class="iconfont">&#xe655;</i></div>
            <div class="p">已答题库</div>
          </div>
        </div>
        <div class="center">
          <van-circle
            v-model="currentRate"
            :rate="30"
            :speed="10"
            class="circle"
            layer-color="none"
            :color="color"
          >
            <div class="txt">
              <div class="txt1">顺序刷题</div>
              <div class="txt2">50/233</div>
            </div>
          </van-circle>
        </div>
      </div>
      <div class="line2"></div>
      <div class="all">
        <div class="l">累积收入</div>
        <div class="num">23,453,245,000</div>
      </div>
      <div class="btn-bottom">
        <van-button class="round" color="#00b8d4" block @click="goQuestionInfo"
          >模拟面试</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { interviewFilters } from '../../../api/question'
export default {
  data () {
    return {
      city: '全国',
      currentRate: 0,
      value: '',
      indexList: ['A'],
      info: '',
      currentIndex: 0, // 当前点击项索引
      color: {
        '0%': 'rgba(228,1,55,0.7)',
        '100%': 'rgba(228,1,55,0.3)'
      }
    }
  },
  async created () {
    // 因为后台接口 比较慢 我们可以在这设设置加载请求到数据后 清除加载
    this.$toast.loading({
      message: '加载中',
      duration: 0
    })
    const res = await interviewFilters()
    // window.console.log('00--------------')
    window.console.log(res)
    this.info = res.data.data
    this.$toast.clear()
    this.indexList = Object.keys(res.data.data.citys)
  },
  methods: {
    onCfirm (str) {
      // window.alert('我被点击啦')
      this.city = str
      this.$refs.drop.toggle(false)
      // 因为每个城市对应的tag数量不一样 比如某城市第6 个tag选中高亮 然后切换一个城市 他只有4个tag
      // 那么此时可能出现问题 因此最好设置他切换每个城市默认第一项选中 因此让currentIndex = 0
      this.currentIndex = 0
    },
    goQuestionInfo () {
      this.$router.push({
        path: '/home/questionInfo',
        query: {
          city: this.city,
          id: this.info.cityPositions[this.city][this.currentIndex].id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.question {
  height: 100%;

  .bg {
    height: 100%;
    background-color: #f7f4f5;
  }
  .title {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #222222;
    line-height: 25px;
    letter-spacing: 0px;
    .city {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 17px;
      margin-left: 5px;
    }
  }
  .content {
    background-color: #fff;
    padding: 0 @p15;
    .tagList {
      width: 100%;
      display: flex;
      margin-top: 20px;
      overflow: auto;
      .tag {
        flex: 0 0 auto;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #545671;
        line-height: 17px;
        letter-spacing: 0px;
        padding: 12px;
        border-radius: 8px;
        margin-right: 10px;
      }
      .active {
        background-color: #00b8d4 !important;
        color: #fff !important;
      }
    }
  }
  .line {
    height: 10px;
    background-color: #f7f4f5;
    margin-top: 10px;
  }
  .middle {
    background: #fff;
    position: relative;
    padding: 15px 36px;
    .middle-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .middle-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 35px;
    }
    .item {
      text-align: center;
      .icon1 {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-align: center;
        line-height: 44px;

        background: linear-gradient(180deg, #ff8080, #ff4949);
        .iconfont {
          font-size: 26px;
          color: #fff;
        }
      }
      .color2 {
        background: linear-gradient(180deg, #ffda05, #ffb302);
      }
      .color3 {
        background: linear-gradient(180deg, #00ddec, #00b8d4);
      }
      .color4 {
        background: linear-gradient(180deg, #3ee5b1, #1dc779);
      }
      .p {
        text-align: center;
        display: inline-block;
        margin-top: 10px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #545671;
        line-height: 17px;
        letter-spacing: 0px;
      }
    }
    .center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 120px;
      height: 120px;
      background: url(~@/assets/编组.png) no-repeat;
      background-size: 100%;
      .circle {
        width: 100% !important;
        height: 100% !important;
        padding: 10px;
        .txt {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: linear-gradient(180deg, #ff6f92, #e40137);
          .txt1,
          .txt2 {
            color: #fff;
            font-size: 16px;
          }
          .txt1 {
            padding-top: 25px;
          }
          .txt2 {
            margin-top: 10px;
            font-weight: 400;
          }
        }
      }
    }
  }
  .line2 {
    height: 10px;

    background-color: #f7f4f5;
  }
  .all {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    text-align: center;
    .l {
      margin-bottom: 20px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: center;
      color: #545671;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .num {
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: center;
      color: #545671;
      line-height: 42px;
      letter-spacing: 0px;
    }
  }
  .btn-bottom {
    padding: @p15;

    .round {
      border-radius: 5px;
    }
  }
}
</style>
